<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>注册页面</title>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> -->
    <meta name="viewport" content="width=750,target-densitydpi=device-dpi,maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript">
        function setWidth(e) { if (/Andriod/i.test(navigator.userAgent)) { var f, d = window.innerWidth; (d != e) && (f = d / e), document.addEventListener("DOMContentLoaded", function () { var a = document.getElementsByTagName("body")[0]; a.style.webkitTransformOrigin = "left top"; a.style.webkitTransform = "scale(" + f + ")" }, !1) } } setWidth(750);
    </script>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/login.css" />
    <style>
        .mui-slider-indicator .mui-active.mui-indicator{
			background: #00c6ff;
			height: 20px;
			width: 20px;
        }

         /* 输入框里面的图标 */
        .a1{
            background-image: url(images/logo1.png);
            background-size: 73px 48px;/*小图标的大小*/
            background-position: 0px 6px;/*小图标在input的位置*/
            background-repeat: no-repeat;/*背景小图标不重复*/
        }
        
        /* 输入框里面的图标 */
        .a2{
            background-image: url(images/logo2.png);
            background-size: 73px 48px;/*小图标的大小*/
            background-position: 0px 6px;/*小图标在input的位置*/
            background-repeat: no-repeat;/*背景小图标不重复*/
        }
        /* 输入框里面的图标 */
        .a3{
            background-image: url(images/logo7.png);
            background-size: 73px 48px;/*小图标的大小*/
            background-position: 0px 6px;/*小图标在input的位置*/
            background-repeat: no-repeat;/*背景小图标不重复*/
        }
        /* 输入框里面的图标 */
        .a4{
            background-image: url(images/logo7-02.png);
            background-size: 73px 48px;/*小图标的大小*/
            background-position: 0px 6px;/*小图标在input的位置*/
            background-repeat: no-repeat;/*背景小图标不重复*/
        }
	</style>
</head>

<body>
    <!--侧滑菜单容器  - 最大容器-->
    <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
        <!--右侧菜单部分-->


        <aside id="offCanvasSide" class="mui-off-canvas-right my-mui-draggable">
            <div id="offCanvasSideScroll" class="mui-scroll-wrapper ">
                <div class="mui-scroll ">
                    <div class="content my-content">
                        <p>
                            <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block my-btn">×</button>
                        </p>
                    </div>
                    <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted my-table-view my-mui-table-view-cell">
                        <li class="mui-table-view-cell my-mui-table-view-cell">
                            <a href="index.html" class="mui-navigate-right my-mui-navigate-right">
                                首页
                            </a>
                        </li>
                        <li class="mui-table-view-cell my-mui-table-view-cell">
                            <a href="contact_us.html" class="mui-navigate-right my-mui-navigate-right">
                                关于金鸿基
                            </a>
                        </li>
                        <li class="mui-table-view-cell my-mui-table-view-cell">
                            <a href="match.html" class="mui-navigate-right my-mui-navigate-right">
                                赛事中心
                            </a>
                        </li>
                        <li class="mui-table-view-cell my-mui-table-view-cell">
                            <a href="video_list.html" class="mui-navigate-right my-mui-navigate-right">
                                赛事视频
                            </a>
                        </li>
                        <li class="mui-table-view-cell my-mui-table-view-cell">
                            <a href="apply_team.html" class="mui-navigate-right my-mui-navigate-right">
                                报名中心
                            </a>
                        </li>
                        <li class="mui-table-view-cell my-mui-table-view-cell">
                            <a href="team_detail.html" class="mui-navigate-right my-mui-navigate-right">
                                直播间
                            </a>
                        </li>
                        <li class="mui-table-view-cell my-mui-table-view-cell">
                            <a href="about_us.html" class="mui-navigate-right my-mui-navigate-right">
                                公司资讯
                            </a>
                        </li>
                        <li class="mui-table-view-cell my-mui-table-view-cell">
                            <a href="my-team.html" class="mui-navigate-right my-mui-navigate-right">
                                服务中心
                            </a>
                        </li>
                        <li class="mui-table-view-cell my-mui-table-view-cell">
                            <a href="contact_us.html" class="mui-navigate-right my-mui-navigate-right">
                                联系我们
                            </a>
                        </li>
                    </ul>
                    <div class="footbtn">
                        <a href="register.html" class="my-text">
                            登录
                        </a>
                    </div>
                </div>
            </div>
        </aside>



        <!--主页部分-->
        <div class="mui-inner-wrap">
            <!--页面头部-->
            <header class="mui-bar mui-bar-nav my-mui-bar">
                <a class="mui-action-back mui-icon mui-pull-left">
                    <img src="images/logo.png" alt="">
                </a>
                <h1 class="mui-title"></h1>
                <a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-icon-bars mui-pull-right my-nav"></a>
            </header>


            <!--页面内容-->
                <div id="offCanvasContentScroll" class=" mui-scroll-wrapper">
                <div class="mui-content my-mui-content">
               <div class="my_neirong">
                <div class="k">
                    <tr >
                        <td><div class="inpuss"><input id="username"  name="username" type="text" class="a a1" placeholder="昵称"></div></td>
                        <td><div class="inpuss"><input id="pwd1" name="pwd1" type="password" class="a a2" placeholder="设置密码"></div></td>
                        <td><div class="inpuss"><input id="pwd2" name="pwd2" type="password" class="a a2" placeholder="确认密码"></div></td>
                        <td><div class="inpuss"><input id="photo" name="photo" type="text" class="a a3" placeholder="手机号"></div></td>
                        <td><div class="inpuss"><input id="Email" name="Email" type="text" class="a a4" placeholder="设置邮箱"></div></td>
                    </tr>
                </div>
                <!-- 登录按钮 -->
                <div class="kk">
                    <tr>
                        <td><div class="btnsub"><input class="b" type="submit" value="注册"></div></td>
                    </tr>
                </div>
                <!--  注册链接等文字 -->
                <div class="kkk">
                    <p class="k1"><span>已有账号？</span><a href="register.html">马上登陆</a></p>
                </div>
            </div>
            </div>
                <div class="clear"></div>
            </div>


                <!-- off-canvas backdrop 遮罩层-->
                <div class="mui-off-canvas-backdrop"></div>
        </div>
    </div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="layer-v3.1.1/layer/layer.js"></script>
<script>
    //表单验证
    var username_bool = false;
    mui(".inpuss").on("click", "#username", function() {

        layer.tips('<span style="font-size: .38rem;display: block;">只能输入1到10个汉字</span>', '#username', {
            tips: [1, '#0FA6D8'], //还可配置颜色
        });
        document.getElementsByClassName('layui-layer')[0].style.width='220px';
    });

    document.getElementsByName('username')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^[\u4e00-\u9fa5]{1,10}$/)) {//我习惯用match
            $(this).css('borderColor','red');
            username_bool = false;
        }else{
            $(this).css('borderColor','green');
            username_bool = true;
        }
    });

    var pwd1_bool = false;
    mui(".inpuss").on("focusout", "#pwd1", function() {
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if(str==''){
            $(this).css('borderColor','red');
            layer.tips('<span style="font-size: .38rem;display: block;">密码不许为空</span>', '#pwd1', {
                tips: [1, '#0FA6D8'], //还可配置颜色
            });
        }
    });
    mui(".inpuss").on("click", "#pwd1", function() {

        layer.tips('<span style="font-size: .38rem;display: block;">由6-21字母和数字组成，不能是纯数字或纯英文</span>', '#pwd1', {
            tips: [1, '#0FA6D8'], //还可配置颜色
        });
        document.getElementsByClassName('layui-layer')[0].style.width='250px';
    });

    document.getElementsByName('pwd1')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/)) {//我习惯用match
            $(this).css('borderColor','red');
            pwd1_bool = false;
        }else{
            $(this).css('borderColor','green');
            pwd1_bool = true;
        }
    });

    var pwd2_bool = false;
    document.getElementsByName('pwd2')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        var str2 =mui('input[name="pwd1"]')[0].value;
        str2=str2.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if(str==''){
            $(this).css('borderColor','red');
            return;
        }
        if (str != str2) {//我习惯用match
            $(this).css('borderColor','red');
            pwd2_bool = false;
        }else{
            $(this).css('borderColor','green');
            pwd2_bool = true;
        }
    });
    mui(".inpuss").on("focusout", "#pwd2", function() {
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        var str2 =mui('input[name="pwd1"]')[0].value;
        str2=str2.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if(str==''){
            $(this).css('borderColor','red');
            layer.tips('<span style="font-size: .38rem;display: block;">密码不许为空</span>', '#pwd2', {
                tips: [1, '#0FA6D8'], //还可配置颜色
            });
            return;
        }
        if (str != str2) {//我习惯用match
            $(this).css('borderColor','red');
            layer.tips('<span style="font-size: .38rem;display: block;">两次密码不一致</span>', '#pwd2', {
                tips: [1, '#0FA6D8'], //还可配置颜色
            });
            document.getElementsByClassName('layui-layer')[0].style.width='250px';
            pwd2_bool = false;
        }else{
            $(this).css('borderColor','green');
            pwd2_bool = true;
        }

    });

    var photo_bool = false;
    mui(".inpuss").on("focusout", "#photo", function() {
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^1(3|4|5|7|8)\d{9}$/)) {//我习惯用match
            $(this).css('borderColor','red');
            photo_bool = false;
            layer.tips('<span style="font-size: .38rem;display: block;">手机号码输入错误</span>', '#photo', {
                tips: [1, '#0FA6D8'], //还可配置颜色
            });
        }else{
            $(this).css('borderColor','green');
            photo_bool = true;
        }
    });
    document.getElementsByName('photo')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^1(3|4|5|7|8)\d{9}$/)) {//我习惯用match
            $(this).css('borderColor','red');
            photo_bool = false;
        }else{
            $(this).css('borderColor','green');
            photo_bool = true;
        }
    });

    var email_bool = false;
    document.getElementsByName('Email')[0].addEventListener('input',function(){
        var str = this.value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if (!str.match(/^\w+\@[0-9a-zA-Z]+\.(com|com.cn|edu|hk|cn|net)$/)) {//我习惯用match
            $(this).css('borderColor','red');
            email_bool = false;
        }else{
            $(this).css('borderColor','green');
            email_bool = true;
        }
    });


    // 点击注册验证
    mui(".btnsub").on("click", ".b", function() {
        if(!username_bool){
            layer.msg('昵称输入错误！');
            return;
        }
        if(!pwd1_bool){
            layer.msg('密码输入错误！');
            return;
        }
        if(!pwd2_bool){
            layer.msg('确认密码输入错误！');
            return;
        }
        if(!photo_bool){
            layer.msg('手机号码输入错误！');
            return;
        }
        if(!email_bool){
            layer.msg('邮箱输入错误！');
            return;
        }
        var str = mui('input[name="pwd1"]')[0].value;
        str=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        var str2 =mui('input[name="pwd2"]')[0].value;
        str2=str2.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
        if(str != str2){
            layer.msg('两次密码不一致！');
            return;
        }
        layer.msg('注册成功！');
        window.location.href='index.html';
    });


    var href=document.getElementsByTagName('a');

    for(var i=0;i<href.length;i++){
        href[i].ontouchend=function(){
            window.location.href=this.getAttribute("href");
        }
    };
</script>
</html>